<template>
  <section class="wrap">
    <el-form ref="ruleForm" :rules="rules" :model="ruleForm" label-width="120px" class="demo-ruleForm">
      <el-form-item label="游戏平台" prop="type">
        <el-select style="width: 100%;" v-model="ruleForm.type" placeholder="请选择游戏平台">
          <el-option v-for="item in option" :key="item.value" :label="item.label" :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="所属游戏" prop="gameId">
        <el-select style="width: 100%;" v-model="ruleForm.gameId" placeholder="请选择所属游戏">
          <el-option v-for="item in filterGameList(ruleForm.type)" :key="item.id" :label="item.gameName" :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商品名称" prop="idleName">
        <el-input v-model="ruleForm.idleName" />
      </el-form-item>
      <el-form-item label="结算周期" prop="day">
        <el-input v-model="ruleForm.day" />
      </el-form-item>
      <el-form-item label="订单金额" prop="price">
        <el-input v-model="ruleForm.price" type="number"/>
      </el-form-item>

      <el-form-item>
        <!-- <el-button @click="resetForm('ruleForm')">重置</el-button> -->
        <el-button type="primary" :loading="submitting" @click="create">立即创建</el-button>
      </el-form-item>
    </el-form>
  </section>
</template>

<script>
import { hostURL } from '@/plugins/utils/config'
import gameApi from '@/plugins/api/game.js'
import idleApi from '@/plugins/api/idle.js'

export default {
  name: 'UserCreate',
  data() {
    return {
      token: '',
      userList: [],
      option: [
        {
          label: '端游',
          value: 1
        },
        {
          label: '手游',
          value: 2
        },
      ],
      listLoading: false, // 添加缺失的变量
      submitting: false, // 提交状态
      uploadUrl: hostURL + '/upload',
      gameOptions: [],
      ruleForm: {
        gameId: null,
        type: null,
        idleName: '',
        day: 0,
        price: ''
      },
      gameOptions: [],
      rules: {
        type: [
          { required: true, message: '请选择游戏平台', trigger: 'change' }
        ],
        gameId: [
          { required: true, message: '请选择游戏', trigger: 'change' }
        ],
        idleName: [
          { required: true, message: '请输入商品名称', trigger: 'blur' },
        ],
        day: [
          { required: true, message: '请输入结算天数', trigger: 'blur' },
        ],
        price: [
          { required: true, message: '请输入商品金额', trigger: 'blur' }
        ],
      }
    }
  },
  mounted() {
    // this.getuserList()
    this.getGameList()
  },
  methods: {
    // 上传图片成功回调
    handleUploadSuccess(res) {
      console.log(res);

      if (res.code === 200) {
        this.ruleForm.img = `${hostURL}/uploads/${res.data}` // 修正字段名
        this.$message.success('上传成功!')
      } else {
        this.$message.error(res.message || '上传失败')
      }
    },
    async getGameList() {
      const res = await gameApi.list()
      console.log('res -> ', res);
      if (res.code === 200) {
        this.gameOptions = res.data
      } else {
        this.$message.error('获取游戏列表出错')
      }
    },
    filterGameList(type) {
      return this.gameOptions.filter(item => item.type === type)
    },


    // 提交表单
    submitForm(formName) {
      this.$refs[formName].validate(async(valid) => {
        if (valid) {
          await this.create()
        } else {
          this.$message.warning('请填写完整表单信息')
          return false
        }
      })
    },

    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    },

    // 创建用户
    async create() {
      console.log(this.ruleForm);
      this.ruleForm.createTime = new Date().getTime()
      this.submitting = true
      try {
        const res = await idleApi.add(this.ruleForm)
        if (res.code === 200) {
          await this.$confirm('创建成功，是否退出创建商品页面', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'success'
          })
          this.$router.push('/idle/index')
        } else {
          this.$message.error(res.message || '创建失败')
        }
      } catch (err) {
        console.error('创建商品失败:', err)
        this.$message.error(err.message || '创建商品失败')
      } finally {
        this.submitting = false
      }
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  box-sizing: border-box;
  margin: 24px;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>